<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行程预览</title>
 
</head>

<body style="background-color:#f2f2f2">
<script src="{$baseurl}__PUBLIC__/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="{$baseurl}__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="{$baseurl}__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="{$baseurl}__CSS__/admin.css"  media="all">
    <script src="{$baseurl}__PUBLIC__/jquery/jquery.min.js"></script>
    <script src="{$Think.config.httpFlag}{$Think.config.google_map_url}" async="async"></script>
    <style>
        .width1200{
            width: 800px;
            margin: 0 auto;
            font-size: 16px;
            line-height: 2.5;
            padding-bottom: 40px;
			background-color:#fff;
			padding:50px;
			margin-top:0;
			padding-top: 20px
        }
        .width800{
        	width: 800px;
            margin: 0 auto;
            font-size: 16px;
            line-height: 2.5;
            padding-bottom: 40px;
			padding:50px;
			margin-top:0;
			padding-top: 20px
        }
        .previewtitle{
            text-align: center;
            font-weight: 600
        }
        h3{
            margin-top: 20px;
        }
        .imgbox img{
            width: 100%;
            margin-bottom: 10px;
        }
        #print{
            width: 200px;
           	margin-left: 300px;
           	background-color: #f90
        }
        h5{
        	position: relative;
        	display: inline-block;
        	width: 50%
        }
        h4{
        	position: relative;
        }
        h5:after,h4:after{
        	content: '';
        	position:absolute;
        	display: inline-block;
        	width: 5px;
        	height: 20px;
        	background-color: #f90;
        	left: -15px;
        	top: 9px
        }

		.border-line{
			border-bottom: 1px dashed #eee;
		}
    </style>
<!--startprint1-->
<div style="width: 900px;margin: 0 auto" id="content">


<div class="width1200">
	<img  style="width:150px;margin-left:325px" src="{$baseurl}__CSS__/logo.png">
</div>

<div class="width1200" >

    <h3 class="previewtitle" style="margin-bottom:50px">{notempty name="$name"}{$name}{/notempty}</h3>



    <h5 style="float:left" class="border-line">时间：{notempty name="$scheduletime"}{$scheduletime[0]}—{$scheduletime[1]}{/notempty}</h5>
     <h5 style="float:right" class="border-line">天数：{notempty name="$trip"}{$trip[0]['days']}{/notempty}</h5>

    <h5 style="float:left" class="border-line">人数：{notempty name="$trip"}{$trip[0]['people']}{/notempty}</h5>

 



    <h5 style="float:right;width:50%" class="border-line">定制师：{notempty name="$trip"}{$trip[0]['admin']}{/notempty}</h5>

    <h5 style="float:left;width:100%" class="border-line">城市：{volist name="allcity" id="vo"}<span style="margin-right: 10px">{$vo}</span>{/volist}</h5>
    
    {notempty name="$trip[0]['showintroduction']"}<h4 style="float:left;width:100%" class="border-line">简介：{$trip[0]['introduction']}</h4>{/notempty}

    
<div style="clear:both"></div>


    {volist name="actives" id="vo" key="k"}
        <h3 class="previewtitle" style="color: #f90"><strong>第{$k}天{$vo.title}<span style="margin-left: 10px">{$vo.time}</span></strong></h3>
        <h6  class="previewtitle" style="color: #f90">{volist name="vo['citys']" id="city" }<strong style="display: inline-block;margin-right:25px">{$city}</strong>{/volist}</h6>
        <hr>
            {notempty name="$vo['latlng']"}
        <div id="map{$k}" style="width: 100%;height: 400px">
        </div>
        <div id="right-panel{$k}"></div>


    <script>
        function initMap{$k}() {
            var map = new google.maps.Map(document.getElementById('map{$k}'), {
                zoom: 4,
                center: {lat: 39.90419989999999, lng: 116.40739630000007}  // 北京
            });

            var directionsService = new google.maps.DirectionsService;
            var directionsDisplay = new google.maps.DirectionsRenderer({
                draggable: false,
                map: map,
                panel: document.getElementById('right-panel{$k}')
            });

            directionsDisplay.addListener('directions_changed', function() {
                computeTotalDistance(directionsDisplay.getDirections());
            });

            displayRoute({lat: {$vo['latlng'][0][0]}, lng: {$vo['latlng'][0][1]}},{lat: {$vo['latlng'][1][0]}, lng: {$vo['latlng'][1][1]}}, directionsService,
                directionsDisplay);
        }

        function displayRoute(origin, destination, service, display) {
            service.route({
                origin: origin,
                destination: destination,
                waypoints: [

                    {notempty name="$vo['latlng'][2]"}
                    {volist name="$vo['latlng'][2]" id="ways"}
                    {
                        location:{lat: {$ways[0]}, lng:{$ways[1]}}
                    },
                    {/volist}
                    {/notempty}

                ],
                travelMode: 'DRIVING',
                avoidTolls: true
            }, function(response, status) {
                if (status === 'OK') {
                    display.setDirections(response);
                } else {
                    $("#map{$k}").height("0");
                    $("#right-panel{$k}").height("0");
                }
            });
        }

        function computeTotalDistance(result) {
            var myroute = result.routes[0];
            for (var i = 0; i < myroute.legs.length; i++) {
                var car = myroute.legs[i].distance.value;
                var distance = myroute.legs[i].duration.text;

                //     $(".car").eq(i).html("车程"+car/1000+"公里");
                //     $(".distance").eq(i).html(distance);
                // }
            }
        }
        initMap{$k}()
    </script>
    {/notempty}

        {volist name="vo['active']" id="sub" key="subk"}

        <hr>
        <span style="font-weight:600"><span style="margin-right: 10px">{$sub.time}</span>{if $sub.poiname}{$sub.poiname}{elseif $sub.cityname}{$sub.cityname}{else}{$sub.title}{/if}</span>{notempty name="$sub.time"}{/notempty}

{notempty name="$sub.showaddress"}{notempty name="$sub.poi[0]['address']"}<div>地址：<span style="margin-left: 10px">{$sub.poi[0]['address']}</span> </div> {/notempty}{/notempty}

        {notempty name="$sub.content"}<div ><span style="margin-left: 10px">{$sub.content}</span> </div> {/notempty}
        {notempty name="$sub.poi[0]['introduce']"}<div>中文介绍：<span style="color: #7e7e7e">{$sub.poi[0]['introduce']}</span> </div> {/notempty}
        {notempty name="$sub.showeng_introduce"}{notempty name="$sub.poi[0]['eng_introduce']"}<div>英文介绍：<span style="color: #7e7e7e">{$sub.poi[0]['eng_introduce']}</span> </div> {/notempty}{/notempty}
        
        {notempty name="$sub.showopen_time"} {notempty name="$sub.poi[0]['open_time']"}<div>开放时间：<span style="margin-left: 10px">{$sub.poi[0]['open_time']}</span> </div> {/notempty}{/notempty}


        {notempty name="$sub.showmobile"} {notempty name="$sub.poi[0]['mobile']"}<div>联系方式：<span >{$sub.poi[0]['mobile']}</span></div>{/notempty}{/notempty}
        {notempty name="$sub.showticket"} {notempty name="$sub.poi[0]['ticket']"}<div>门票信息：<span >{$sub.poi[0]['ticket']}</span></div>{/notempty}{/notempty}
        {notempty name="$sub.showprice"} {notempty name="$sub.poi[0]['price']"}<div>价格：<span >{$sub.poi[0]['price']}</span></div>{/notempty}{/notempty}
        {notempty name="$sub.showgrade"} {notempty name="$sub.poi[0]['grade']"}<div>星级：<span >{$sub.poi[0]['grade']}</span></div>{/notempty}{/notempty}
        {notempty name="$sub.showsource"} {notempty name="$sub.poi[0]['source']"}<div>来源：<span >{$sub.poi[0]['source']}</span></div>{/notempty}{/notempty}
        {notempty name="$sub.showticket_url"} {notempty name="$sub.poi[0]['ticket_url']"}<div>订票官网：<span >{$sub.poi[0]['ticket_url']}</span></div>{/notempty}{/notempty}
        {notempty name="$sub.showdescription"} {notempty name="$sub.poi[0]['description']"}<div>特别说明：<span >{$sub.poi[0]['description']}</span></div>{/notempty}{/notempty}
    {notempty name="$sub.showthumb"}
    {notempty name="$sub.poi[0]['thumb']"}
    <div class="imgbox" id="imgbox{$sub['id']}" style="margin-top: 10px"></div>

        <script>
            var activeid="{$sub.poi[0]['id']}";
            $.ajax({
                url:"{:url('admin/poi/seepoimap')}?prevadminpwd={$pwd}",
                type:"post",
                data:{
                    id:activeid
                },
                success:function (data) {

                    if(data.code==1){
                        var imgs=(data.data[0].thumb).split(",");
                        console.log(imgs);
                        for(var i =0;i<imgs.length;i++){
                            if(imgs[i]){
                                $("#imgbox{$sub['id']}").append("<img src='http://<?php echo $_SERVER['HTTP_HOST'];?>"+imgs[i]+"'>");
                            }
                        }
                }

                }
            });

        </script>
    {/notempty}
    {/notempty}


        {/volist}




    {/volist}



    <div>
        {notempty name="$trip[0]['showcareful']"}<h4 style="float:left;width:100%" class="border-line">注意事项：{$trip[0]['careful']}</h4>{/notempty}

        {notempty name="$trip[0]['showprice']"}<h5 style="float:left;width:100%" class="border-line">费用包含：{$trip[0]['price']}</h5>{/notempty}
        {notempty name="$trip[0]['showprice']"}<h5 style="float:left;width:100%" class="border-line">费用不含：{$trip[0]['priceno']}</h5>{/notempty}
        {notempty name="$trip[0]['showback']"}<h4 style="float:left;width:100%" class="border-line">退改规则：{$trip[0]['back']}</h4>{/notempty}

        <h4 style="float:left;width:100%" class="border-line">联系方式</h4>
        <div style="font-size: 16px">
        国内客服: +86 400-100-5295<br>
        北美客服: +1 800-932-1178<br>
        联系我们: support@kuaibangxing.com<br>
        官网：http://www.kuaibangxing.com<br>
        <img  style="width:150px" src="{$baseurl}__CSS__/erwei.jpg">
        </div>
    </div>

</div>
</div>
<!--endprint1-->

{empty name="$showpwd"}

<div id="printbox" class="width1200" style="background-color:#f2f2f2;padding-top:50px">
	<span id="print" onclick="preview(1)" class="layui-btn layui-btn-lg">
	    打印
	</span>
    <form action="" id="form">
    <input type="hidden" id="url"  value="{$url}"/>

    <button id="button1" style="width: 200px;margin-left: 300px;margin-top: 30px" class="layui-btn layui-btn-lg" type="submit">生成PDF</button>

  </form>

  <form action=""  id="wordform">
    <input type="hidden" id="wordurl"  value="{$wordurl}"/>

    <button  id="button2" style="width: 200px;margin-left: 300px;margin-top: 30px" class="layui-btn layui-btn-lg" type="submit">生成WORD</button>

  </form>
</div>
{/empty}

</body>
<script src="{$baseurl}__PUBLIC__/layui/layui.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>-->
<script type="text/javascript">


</script>
<script>  
function preview(oper)
{
	document.getElementById("printbox").style.display='none';
window.print();  
}  
</script>

  <script> 
  $(function(){
    $('#form').submit(function(){
      if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true) 
      { 
        alert('正在生成pdf，请耐心等待...'); 
        return false; 
      } 
   
      $(this).data('generate', true); 
      $('#button1').text('正在生成pdf，请等待...').attr('disabled', true);
   
      $.ajax({ 
        type: 'GET', 
        url: '/snap.php',
        data: 'url=' + $('#url').val(), 
        success: function(data){
            var $form = $('<form method="GET"></form>');
            $form.attr('action', '/'+data);
            $form.appendTo($('body'));
            $form.submit();
          $('#form').data('generate', false); 
          $('#button1').text('生成PDF').attr('disabled', false); 
        } 
      }); 
   
      return false; 
    });

    $('#wordform').submit(function(){ 
      if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true) 
      { 
        alert('正在生成word，请等待...'); 
        return false; 
      } 
   
      $(this).data('generate', true); 
      $('#button2').text('正在生成word，请等待...').attr('disabled', true);
   
      $.ajax({ 
        type: 'GET', 
        url: '/html2word.php',
        data: 'url=' + $('#wordurl').val(), 
        success: function(data){
            var $form = $('<form method="GET"></form>');
            $form.attr('action', '/'+data);
            $form.appendTo($('body'));
            $form.submit();
          $('#wordform').data('generate', false); 
          $('#button2').text('生成WORD').attr('disabled', false); 
        } 
      }); 
   
      return false; 
    });


  }); 
  </script> 

</html>
